<script setup lang="ts">
import {userInfoStore} from "~/stores/userInfoStore";
import MyImage from "~/components/image/myImage.vue";
import FromItemPlus from "~/components/constant/fromItemPlus.vue";
import MyTag from "~/components/constant/myTag.vue";
import {rechargeCarmineCode} from "~/api/userApi";
import {successCode} from "~/api/base/http";
import {error, success, warning} from "~/utils/myMessage";

const userInfo = ref({})

const userSex = ref()

const emits = defineEmits(["update"]);

function update() {
  emits("update");
}

const rechargeShow = ref(false);
const carmineCode = ref("");

function doCarmine() {
  if(carmineCode.value === ''){
    warning("请输入卡密");
    return;
  }
  rechargeCarmineCode(carmineCode.value).then(res => {
    if (res.code === successCode) {
      success(res.message);
      userInfoStore().initLogUser(true);
      carmineCode.value = "";
    } else {
      error(res.message);
    }
    rechargeShow.value = false;
  })
}
</script>

<template>
  <div class="user-base-info-box">
    <div class="user-role-box">
      <div class="user-top-box">
        <div class="user-avatar-box">
          <MyImage v-model="userInfoStore().loginUser.imageUrl" :image-config="{shape:'circle',size:100}"
                   @updateImg="update"/>
        </div>
        <div class="user-role-other-box">
          <div class="user-other-item">
            {{ userInfoStore().loginUser.name }}
          </div>
          <div class="user-other-item">
            <my-tag :data="userInfoStore().loginUser.powerName" :mapping="userInfoStore().getPowerTableOption()"/>
          </div>
          <div class="user-other-item">
            {{ userInfoStore().loginUser.roleName }}
          </div>
        </div>
      </div>
      <div class="user-bottom-box">
        <div class="user-money-item">
          <div class="title">
            ￥ 我的余额
          </div>
          <div class="content">
            {{ userInfoStore().loginUser.money }}
          </div>
          <div class="money-button">
            <el-button type="danger" @click="rechargeShow = true">充 值</el-button>
          </div>
        </div>
        |
        <div class="user-account-item">
          <div class="title">
            累计消费
          </div>
          <div class="content">
            {{ userInfoStore().loginUser.amount }}
          </div>
        </div>
      </div>
    </div>
    <div class="user-base-message-box">
      <div class="user-base-message-title-box">
        基本信息
      </div>
      <div class="user-base-message-content-box">
        <el-form label-width="auto" style="max-width: 600px">
          <el-form-item label="用户昵称">
            <from-item-plus v-model="userInfoStore().loginUser.name" @update="update"/>
          </el-form-item>
          <el-form-item label="个人简介">
            <from-item-plus v-model="userInfoStore().loginUser.introduction" @update="update"/>
          </el-form-item>
          <el-form-item label="性 别">
            <from-item-plus v-model="userInfoStore().loginUser.sex" type="option" @update="update"
                            :type-option='[{label: "男",value: 0},{label: "女",value: 1}]'/>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="user-other-message-box">

    </div>
    <div class="user-recharge-dialog">
      <el-dialog v-model="rechargeShow" title="充值" width="500" :modal="false" :draggable="true">
        <el-input style="width: 30rem" v-model="carmineCode" placeholder="请输入卡密"/>
        <template #footer>
          <el-button type="danger" @click="rechargeShow=false">取 消</el-button>
          <el-button type="success" @click="doCarmine">充 值</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped lang="scss">
.user-base-info-box {
  display: flex;
  flex-direction: column;

  .user-role-box {
    background-color: var(--item-bgc);

    .user-top-box {
      display: flex;

      .user-avatar-box {
        margin: .2rem 1rem;
      }

      .user-role-other-box {

        .user-other-item {
          margin: 1rem 0;
        }
      }
    }

    .user-bottom-box {
      display: flex;
      align-items: center;
      background-color: #fdfdfd;
      border-top: #f9f9f9 solid .2rem;

      .user-money-item {
        display: flex;
        align-items: center;
        padding: 1rem 2rem;

        .title {
          color: #f9af4c;
          font-size: 1.1rem;
          padding: 0 1rem;
        }

        .money-button {
          margin: 0 2rem 0 8rem;
        }

        .content {
          font-size: 1rem;
        }
      }

      .user-account-item {
        display: flex;
        align-items: center;
        padding: 1rem 2rem;

        .title {
          font-size: 1.1rem;
          padding: 0 1rem;
        }

        .content {
          font-size: 1rem;
        }
      }
    }
  }

  .user-base-message-box {
    margin-top: 1rem;
    background-color: var(--item-bgc);

    .user-base-message-title-box {
      padding: 1rem 2rem;
      font-size: 1.2rem;
      font-weight: bolder;
      border-bottom: solid .1rem var(--body-bgc);
    }

    .user-base-message-content-box {
      padding: 2rem 1.5rem;
    }
  }
}
</style>